<template>
  <div id="pm-form-container" class="pm-form-container">
    <div id="main-container" class="main-container">
      <h2 style="text-align: center">个人信息</h2>
      <div class="message-container">
        <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
        <el-input v-model="pm_name" :disabled="isDisabled" style="width: 200px"></el-input>
      </div>
      <div class="message-container">
        <span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
        <el-radio v-model="pm_sex" :disabled="isDisabled" label="1">男</el-radio>
        <el-radio v-model="pm_sex" :disabled="isDisabled" label="2">女</el-radio>
      </div>
      <div class="message-container">
        <span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：</span>
        <el-input v-model="pm_age" :disabled="isDisabled" style="width: 200px"></el-input>
      </div>
      <div class="message-container">
        <span>身份证号：</span>
        <el-input v-model="pm_identity" :disabled="isDisabled" style="width: 200px"></el-input>
      </div>
      <div class="message-container">
        <span>联系电话：</span>
        <el-input v-model="pm_phone" :disabled="true" style="width: 200px"></el-input>
      </div>
      <div class="message-container">
        <span>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</span>
        <el-input v-model="pm_position" :disabled="true" style="width: 200px"></el-input>
      </div>
      <div class="button-container" v-if="button1">
        <el-row>
          <el-button type="primary" style="width: 200px" @click="changeMessage" plain>修改信息</el-button>
        </el-row>
      </div>
      <div class="button-container" v-if="button1">
        <el-row>
          <el-button type="primary" style="width: 200px" @click="changePassword" plain>修改密码</el-button>
        </el-row>
      </div>
      <div class="button-container" style="width: 440px" v-if="button2">
        <el-row>
          <el-button type="primary" style="width: 200px" @click="cancelEdit" plain>取消编辑</el-button>
          <el-button type="primary" style="width: 200px" @click="submitMessage" plain>确认修改</el-button>
        </el-row>
      </div>
    </div>

    <!-- 弹框--修改密码 -->
    <div id="second-container" class="second-container" v-if="popFrame">
      <div class="change-password" v-if="popFrame">
        <h2 style="position:relative;text-align: center;top: 10px;">修改密码</h2>
        <div class="password-container">
          <span>原&nbsp;&nbsp;密&nbsp;码：</span>
          <el-input v-model="oldPassword" autocomplete="new-password" style="width: 200px" clearable show-password></el-input>
        </div>
        <div class="password-container">
          <span>新&nbsp;&nbsp;密&nbsp;码：</span>
          <el-input v-model="newPassword" style="width: 200px" clearable show-password></el-input>
        </div>
        <div class="password-container">
          <span>确认密码：</span>
          <el-input v-model="againNewPassword" style="width: 200px" clearable show-password></el-input>
        </div>
        <div class="pwd-button">
          <el-row>
            <el-button style="width: 100px" @click="cancel" plain>取消</el-button>
            <el-button style="width: 100px" @click="submitPassword" plain>确认</el-button>
          </el-row>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
  import {getPersonMessage, submitMsg, changePwd} from "./personmessageJs";
  import {blurElement} from "../../util/js/utils";

  export default {
    name: "PersonMessage",
    data() {
      return {
        pm_name: '',
        pm_sex: '1',
        pm_age: '',
        pm_identity: '',
        pm_phone: '',
        pm_position: '',
        isDisabled: true,
        button1: true,
        button2: false,
        popFrame: false,
        oldPassword: '',
        newPassword: '',
        againNewPassword: ''
      };
    },
    mounted() {
      this.fetchPersonMessage(); // 挂载完之后再请求数据
    },
    methods: {
      // 获取用户的基本信息
      fetchPersonMessage() {
        const _this = this;

        getPersonMessage().then(res => {
          if (res.code === '200') {
            // 请求成功
            if (res.data.sex === '男') {
              _this.pm_sex = '1';
            } else {
              _this.pm_sex = '2';
            }
            _this.pm_name = res.data.name;
            _this.pm_age = res.data.age;
            _this.pm_identity = res.data.identity;
            _this.pm_phone = res.data.phone;
            _this.pm_position = res.data.position;
          } else {
            // 请求失败
            console.log("错误信息:" + res.msg);
          }
        }).catch(error => {
          console.log("出错了！", error)
        })
      },

      // 修改信息，改变按钮的隐/显样式
      changeMessage() {
        this.isDisabled = false; //修改输入框的可编辑样式
        this.button1 = false;
        this.button2 = true;
      },

      // 修改密码
      changePassword() {
        // 打开弹窗，并设置背景模糊
        this.popFrame = true;
        this.oldPassword = ''
        blurElement('main-container', 1.5)
      },

      // 取消编辑
      cancelEdit() {
        // 将样式修改为不可编辑，并发送请求获取用户信息
        this.isDisabled = true; //修改输入框的可编辑样式
        this.button1 = true;
        this.button2 = false;
        this.fetchPersonMessage();// 重新请求数据
      },

      // 提交修改后的信息数据
      submitMessage() {
        const _this = this;

        // 封装信息，提交数据
        const mUser = {
          "name": _this.pm_name,
          "age": _this.pm_age,
          "sex": _this.pm_sex,
          "identity": _this.pm_identity,
          "phone": _this.pm_phone,
        }
        // 弹框确认操作
        _this.$confirm('确实是否修改信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 提交数据
          submitMsg(mUser).then(res => {
            if (res.code === '200') {
              //请求成功，修改为不可修改状态
              _this.isDisabled = true;
              _this.button1 = true;
              _this.button2 = false;
              _this.$message({
                type: 'success',
                message: '修改成功!'
              });
            } else {
              _this.$message.error("错误信息：" + res.msg)
            }
          }).catch(error => {
            _this.$message.error("系统错误")
            console.log("出错了", error)
          });
        })
          .catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
      },

      // 取消密码弹框
      cancel() {
        this.popFrame = false;
        blurElement('main-container', 0)
      },

      // 提交修改密码
      submitPassword() {
        const _this = this;

        if (_this.newPassword !== _this.againNewPassword) {
          this.$message.error('两次新密码输入不一致');
          return null;
        }

        const message = {
          'phone': _this.pm_phone,
          'password': _this.newPassword,
        }
        _this.$confirm('确认是否修改密码？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送请求
          changePwd(message).then(res => {
            if (res.code === '200') {
              this.$alert('已成功修改密码，请重新登录', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  // 清除token
                  sessionStorage.removeItem("token")
                  // 跳转到登录页面
                  this.$router.push({path: '/login'});
                }
              })
            } else if (res.code === '202') {
              // 两次出现的密码相同
              _this.$message.warning(res.msg)
            } else {
              _this.$message.error("错误信息：" + res.msg)
            }
          }).catch(error => {
            _this.$message.error("系统出错了!")
            console.log("出错了！", error)
          })
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消提交'
          })
        })
      }
    }
  }
</script>

<style scoped>
@import "personMessageCss.css";
</style>
